<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    [id^="instance"] {
      position: relative;
    }

    [id^="progress"] {
      width: 100%;
      height: 600px;
      line-height: 600px;
      text-align: center;
      font-size: 50px;
      color: #333;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
<div id="instance4">
  <div class="demo"></div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      start/open
    </button>
    <button class="btn btn-danger" type="button" data-pause>
      pause
    </button>
  </div>
  <div id="progress4">0%</div>
</div>

<div id="instance5">
  <div class="demo"></div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      start/open
    </button>
    <button class="btn btn-danger" type="button" data-pause>
      pause
    </button>
  </div>
</div>

<script>
  function getCss(elem, prop) {
    if (window.getComputedStyle) {
      return getComputedStyle(elem, false)[prop]
    } else if (elem.currentStyle) {
      return elem.currentStyle[prop]
    }
  }

  (function() {
    var instance = document.querySelector('#instance4')
    var demo = instance.querySelector('.demo')
    var btnOpen = instance.querySelector('.btn[data-open]')
    var btnPause = instance.querySelector('.btn[data-pause]')
    var progressElem = document.querySelector('#progress4')
    var elemHeight = parseInt(getCss(demo, 'height')) - 8
    var progress = elemHeight
    var timer = null

    function setProgress() {
      var percent = ((elemHeight - progress) / elemHeight * 100).toFixed()
      progressElem.innerHTML = percent + '%'
      if (percent > 55) {
        progressElem.style.color = '#fff'
      } else {
        progressElem.removeAttribute('style')
      }
    }

    // 一条
    function run() {
      if (progress <= 0) {
        progress = 0
        effect.pause()
        clearInterval(timer)
      } else {
        progress -= 4
        effect.open()
      }
      effect.setOptions({
        offsetTop: progress,
      })
      setProgress()
    }

    var effect = new JParticles.Wave(demo, {
      num: 1,
      line: false,
      fill: true,
      fillColor: '#27C9E5',
      crestHeight: 8,
      offsetTop: progress,
      crestCount: 3,
      speed: .3,
    })

    btnOpen.addEventListener('click', function() {
      if (progress === 0) {
        progress = elemHeight
      }
      clearInterval(timer)
      timer = setInterval(function() {
        run()
      }, 30)
    })
    btnPause.addEventListener('click', function() {
      clearInterval(timer)
    })
  })();

  (function() {
    var instance = document.querySelector('#instance5')
    var demo = instance.querySelector('.demo')
    var btnOpen = instance.querySelector('.btn[data-open]')
    var btnPause = instance.querySelector('.btn[data-pause]')
    var elemHeight = parseInt(getCss(demo, 'height')) - 8
    var originOffsetTop = [elemHeight, elemHeight + 8, elemHeight + 16]
    var progress = Object.assign([], originOffsetTop)
    var originOffsetLeft = [2, 1, 0]
    var offsetLeft = Object.assign([], originOffsetLeft)
    var timer = null

    // 多条和多参数设置
    function run() {
      if (progress[1] <= 0) {
        progress.forEach(function(item, i, array) {
          array[i] = 0
        })
        effect.pause()
        clearInterval(timer)
      } else {
        progress.forEach(function(item, i, array) {
          array[i] = item - 4
        })
        offsetLeft.forEach(function(item, i, array) {
          array[i] = item - 0.5
        })
        effect.open()
      }

      effect.setOptions({
        offsetTop: progress,
        offsetLeft: offsetLeft,
        opacity: 0.5,
        speed: undefined,
      })
    }

    var effect = new JParticles.Wave(demo, {
      num: 3,
      lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
      lineWidth: [.5, .7, .9],
      offsetLeft: offsetLeft,
      offsetTop: progress,
      crestHeight: [8, 12, 16],
      crestCount: 2,
      speed: .07,
    })

    btnOpen.addEventListener('click', function() {
      if (progress[1] <= 0) {
        progress = Object.assign([], originOffsetTop)
        offsetLeft = Object.assign([], originOffsetLeft)
      }
      clearInterval(timer)
      timer = setInterval(function() {
        run()
      }, 30)
    })
    btnPause.addEventListener('click', function() {
      clearInterval(timer)
    })
  })()
</script>
</body>
</html>
